<template>
	<view class="content">
		<!-- 热门课程 -->
		<div class="hotCourse">
			<div class="courselist">
				<view class="courseitem" v-for="(item,index) in courseList" @click="coursedetail(item)">
					<div class="left">
						<image mode="aspectFill" class="leftimg" :src="item.Cover"></image>
						<view :class="['img-icon',item.Type==1?'yellow':'']"></view>
						<view class="img-text">{{item.Type==1?'食谱':item.Type==2?'运动':''}}</view>
					</div>
					<div class="right">
						<view class="coursename">{{item.Title}}</view>
						<view class="coursejs">
							<div class="gray66 font28">{{item.TypeName}}</div>
							<div style="padding-left: 10rpx;" v-if="item.Type==2" class="gray66 font28 pl-10">
								{{item.Level}}
							</div>
							<div class="gray66 font28 pl-10" style="padding-left: 10rpx;">{{item.Duration}}
							</div>
						</view>

					</div>
				</view>
			</div>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseList: [{
					Code: "123123123",
					Content: "https://oss.mcloudsoft.cn/20211109/1a960440-4f52-470d-805b-12fbfb6c4fd1.mp4",
					CourseName: "HIT高强度有氧运动",
					Cover: "https://oss.mcloudsoft.cn/20211229/574d1a15-638e-4c41-a2a2-dc2703ee8b37.png",
					DelFlag: 0,
					Describe: '',
					Duration: "56秒",
					ID: 6,
					Intensity: 2,
					Level: "中等",
					Note: '23423432',
					Title: "HIT高强度有氧运动",
					Type: 2,
					TypeId:2,
					 TypeName: "有氧运动",
				}, {
					Code: "lskec001",
					Content: "https://oss.mcloudsoft.cn/files/60d0368c83f7a.mp4",
					CourseName: "膝关节强化训练",
					Cover: "https://oss.mcloudsoft.cn/20211229/c65c7ae0-65cb-446e-ab07-899d1c426876.png",
					DelFlag: 0,
					Describe:"",
					Duration: "15秒",
					ID: 5,
					Intensity: 1,
					Level: "简单",
					Note: "运动前不要吃太多东西，以免胃部不适  运动请着宽松衣服，避免动作受限。老年人（年龄大于65岁）、孕妇，残疾人  患有糖尿病，心脑血管疾病，肺部类疾病以及其他新陈代谢疾病的人群  患有骨科伤病且尚未痊愈的人群，以及其他医嘱建议不适合运动的人群",
					Title: "膝关节强化训练",
					Type: 2,
					TypeId: 2,
					TypeName: "抗阻运动",
					WorkId: 2049,
				}],
			}
		},
		methods: {
			coursedetail(item){
				uni.navigateTo({
					url: '/pages/player/sportDetail',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('coursecontent', item);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		box-sizing: border-box;
		margin: 0rpx 30rpx 30rpx 30rpx;
		z-index: 2;
	}
	.hotCourse {
		background-color: #FFFFFF;
		padding-bottom: 30rpx;
		text-align: center;
		margin-top: 30rpx;
		//box-shadow: 0 4rpx 10rpx #ccc;
		//border-radius: 20rpx;
	
		.courselist {
			margin-top: 20rpx;
	
			.courseitem {
				display: flex;
				padding-left: 20rpx;
	
				.left {
					position: relative;
					overflow: hidden;
	
					.img-icon {
						position: absolute;
						height: 120rpx;
						width: 120rpx;
						transform: rotate(45deg);
						color: #ffffff;
						background-color: #4F91E2;
						z-index: 2;
						right: -60rpx;
						top: -60rpx;
					}
	
					.img-text {
						font-size: 20rpx;
						transform: rotate(45deg);
						position: absolute;
						right: 2rpx;
						top: 10rpx;
						color: #ffffff;
						z-index: 998;
					}
	
					.leftimg {
						height: 120rpx;
						width: 160rpx;
					}
				}
	
				.right {
					padding-left: 20rpx;
					flex: 1;
					text-align: left;
	
					.coursename {
						font-size: 32rpx;
						line-height: 60rpx;
						color: #333333;
					}
	
					.coursejs {
						font-size: 28rpx;
						line-height: 60rpx;
						color: #999999;
						display: flex;
					}
				}
			}
		}
	}
	
</style>
